<template>
	<div class="subscribe_house">
		<myheader :type_title="type_title" :title="title"></myheader>
		<div class="title">请添加意向楼盘</div>
		<ul class="list-box">
			<li v-for="itme in arr">{{itme}}</li>
		</ul>
		<div class="info">
			<div>
				<input type="text" placeholder="请输入楼盘名称" v-model="srt" />
				<button @click="btnadd">添加</button>
			</div>
		</div>
	</div>
</template>

<script>
	import myheader from '@/components/user/myheader'
	export default {
		name: "subscribe_house",
		data() {
			return {
				title: "创建订阅条件",
				type_title: "noright",
				arr: [],
				srt: ""
			}
		},
		methods: {
			btnadd() {
				this.arr.push(this.srt);
				this.srt = "";
			}
		},
		components: {
			myheader
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.list-box {
		margin: 0.3rem 0 0 0rem;
	}
	
	.list-box li {
		float: left;
		display: inline;
		width: 1.3rem;
		height: 0.8rem;
		background: #f5f5f5;
		color: #999;
		text-align: center;
		line-height: 0.8rem;
		margin: 0 0.2rem 0.1rem 0.3rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		box-sizing: border-box;
	}
	
	.subscribe_house {
		width: 100%;
		height: auto;
		background: #F1F1F1;
	}
	
	.title {
		width: 100%;
		height: 0.7rem;
		line-height: 0.7rem;
		color: #999999;
		padding: 0 0.3rem;
		box-sizing: border-box;
		margin-top: 0.1rem;
		margin-bottom: 0.1rem;
		font-size: 0.3rem;
		background: white;
	}
	
	.info {
		width: 100%;
		height: auto;
		background: white;
	}
	
	.info div {
		width: 100%;
		height: 2.6rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.info input {
		width: 65%;
		height: 0.7rem;
		border: 2px solid #F0F0F0;
		border-radius: 0.1rem;
		font-size: 0.3rem;
		color: #999999;
		text-indent: 0.2rem;
	}
	
	.info button {
		width: 30%;
		height: 0.7rem;
		background: #F4811F;
		color: white;
		font-size: 0.3rem;
		line-height: 0.7rem;
		text-align: center;
		border-radius: 0.1rem;
		border: none;
	}
</style>